<template>
    <div class="sh_SellPromotion_content">
        <div class="header"><img src="/static/img/cuxiaozd.png" alt=""></div>
        <div class="content">
            <div v-for="( item , i ) of spromotion" :key="'sp'+i" :class="'item'+i">
                <div>
                    <h1>{{ item.title }}</h1>
                    <p>{{ item.viceTitle | deleteKuo }}</p>
                </div>
                <div><img :src="item.image" alt=""></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    props: {
        spromotion: null
    },
    components: {}
};
</script>

<style lang='less' scoped>
.sh_SellPromotion_content {
    margin-top: 20px;
    width: 100%;
    height: 690px;
    .header {
        width: 100%;
        height: 80px;
        img {
            width: 100%;
            height: 80px;
        }
    }
    .content {
        width: 100%;
        height: 610px;
        position: relative;
        .item0 {
            position: absolute;
            width: 374px;
            height: 318px;
            text-align: center;
            border: 1px solid #ccc;
            border-bottom: 1px solid #ccc !important;
            > div:first-child {
                height: 118px;
                h1 {
                    font-size: 28px;
                    margin-top: 52px;
                }
                p {
                    font-size: 22px;
                    color: #ff5f7e;
                }
            }
            > div:last-child {
                width: 100%;
                height: 200px;
                text-align: center;
                img {
                    width: 200px;
                    height: 200px;
                }
            }
        }
        .item1 {
            width: 374px;
            height: 160px;
            border: 1px solid #ccc;
            border-left: none;
            border-bottom: none;
            position: absolute;
            left: 375px;
            > div:first-child {
                position: absolute;
                top:46px;
                left:20px;
                h1 {
                    font-size: 28px;
                }
                p {
                    font-size: 22px;
                    color: #ff5f7e;
                }
            }
            > div:last-child {
                width: 100%;
                height: 160px;
                text-align: center;
                margin-left:100px;
                img {
                    width: 160px;
                    height: 160px;
                }
            }
        }
        .item2 {
            width: 374px;
            height: 159px;
            border: 1px solid #ccc;
            border-left: none;
            position: absolute;
            left: 375px;
            top: 159px;
            > div:first-child {
                height: 98px;
                position: absolute;
                top:46px;
                left:20px;
                h1 {
                    font-size: 28px;
                }
                p {
                    font-size: 22px;
                    color: #ff5f7e;
                }
            }
            > div:last-child {
                width: 100%;
                height: 160px;
                text-align: center;
                margin-left:100px;
                img {
                    width: 160px;
                    height: 160px;
                }
            }
        }
        .item3 {
            position: absolute;
            text-align: center;
            width: 250px;
            height: 260px;
            padding-top: 26px;
            border: 1px solid #ccc;
            border-top: none;
            top: 320px;
            > div:first-child {
                height: 98px;
                h1 {
                    font-size: 28px;
                }
                p {
                    font-size: 22px;
                    color: #ff5f7e;
                }
            }
            > div:last-child {
                width: 100%;
                height: 160px;
                text-align: center;
                img {
                    width: 160px;
                    height: 160px;
                }
            }
        }
        .item4 {
            position: absolute;
            text-align: center;
            width: 250px;
            height: 260px;
            padding-top: 26px;
            border: 1px solid #ccc;
            border-top: none;
            top: 320px;
            left: 250px;
            > div:first-child {
                height: 98px;
                h1 {
                    font-size: 28px;/*px*/
                }
                p {
                    font-size: 22px;/*px*/
                    color: #ff5f7e;
                }
            }
            > div:last-child {
                width: 100%;
                height: 160px;
                text-align: center;
                img {
                    width: 160px;
                    height: 160px;
                }
            }
        }
        .item5 {
            position: absolute;
            text-align: center;
            width: 250px;
            height: 260px;
            padding-top: 26px;
            border: 1px solid #ccc;
            border-top: none;
            top: 320px;
            left: 500px;
            > div:first-child {
                height: 98px;
                h1 {
                    font-size: 28px;/*px*/
                }
                p {
                    font-size: 22px;/*px*/
                    color: #ff5f7e;
                }
            }
            > div:last-child {
                width: 100%;
                height: 160px;
                text-align: center;
                img {
                    width: 160px;
                    height: 160px;
                }
            }
        }
    }
}
</style>

